<template>
  <div class="content-wraper">
    <div class="search-box">
      <el-form label-width="100px" :inline="true">
        <el-form-item label="重大危险源名称">
          <el-input v-model="sourceName" />
        </el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search()"
        >查询</el-button>
        <el-button
          type="warning"
          icon="el-icon-refresh"
          @click="reset()"
        >重置</el-button>
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="addRiskSourceChecklist()"
        >新增</el-button>
        <el-button type="success" @click="handleDownload()">导出列表</el-button>
      </el-form>
    </div>
    <div class="detail">
      <com-table
        :data="dataList"
        :columns="columns"
        :total="total"
        @pageChange="pageChange"
      >
        <template v-slot:name="{ row }">
          <a class="com-link" @click="viewDetail(row)">{{ row.name }}</a>
        </template>
        <template v-slot:options="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="editRiskSourceChecklist(row)"
          >编辑</el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="delRiskSourceChecklist(row)"
          >删除</el-button>
        </template>
        <template v-slot:industry="{ row: { industry } }">
          {{ getDictName(riskSourceChecklistIndustry, industry) }}
        </template>
        <template v-slot:condType="{ row: { condType } }">
          {{ getDictName(riskSourceChecklistCondType, condType) }}
        </template>
        <template v-slot:measureHas="{ row: { measureHas } }">
          {{ getDictName(riskSourceChecklistMeasureHas, measureHas) }}
        </template>
        <template v-slot:plan="{ row: { plan } }">
          {{ getDictName(riskSourceChecklistPlan, plan) }}
        </template>
        <template v-slot:projectControlled="{ row: { projectControlled } }">
          {{
            getDictName(riskSourceChecklistProjectControlled, projectControlled)
          }}
        </template>
        <template v-slot:createTime="{ row: { createTime } }">
          {{ dateFormat(createTime) }}
        </template>
      </com-table>
    </div>
    <add-risk-source-checklist
      :show-modal.sync="showModal"
      :opt-type="optType"
      :data="unitDetail"
      @freshList="search"
    />
  </div>
</template>

<script>
import {
  getRiskSourceChecklistList,
  deleteRiskSourceChecklist,
  exportRiskSourceChecklist
} from '@/api/securityManage'
import moment from 'moment'
import { getDictName } from '@/utils/comm'
import addRiskSourceChecklist from './addRiskSourceChecklist.vue'
import {
  riskSourceChecklistIndustry,
  riskSourceChecklistCondType,
  riskSourceChecklistMeasureHas,
  riskSourceChecklistPlan,
  riskSourceChecklistProjectControlled
} from '@/utils/dicData'
export default {
  name: 'RiskSourceChecklist',
  components: {
    addRiskSourceChecklist
  },
  data() {
    return {
      sourceName: '',
      getDictName,
      riskSourceChecklistIndustry,
      riskSourceChecklistCondType,
      riskSourceChecklistMeasureHas,
      riskSourceChecklistPlan,
      riskSourceChecklistProjectControlled,
      list: [],
      dataList: [],
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      showModal: false,
      optType: 'add',
      unitDetail: {},
      columns: [
        {
          label: '机构名称',
          prop: 'organizationName'
        },
        {
          label: '编号',
          prop: 'number',
          width: '180'
        },
        {
          label: '重大危险源名称',
          prop: 'sourceName',
          width: '110'
        },
        {
          label: '重大危险源级别',
          prop: 'sourceLevel',
          width: '110'
        },
        {
          label: '危险源描述',
          prop: 'sourceDesc',
          width: '110'
        },
        {
          label: '行业',
          prop: 'industry',
          slot: 'industry'
        },
        {
          label: '具体部位或位置',
          prop: 'location',
          width: '110'
        },
        {
          label: '危害事件',
          prop: 'event'
        },
        {
          label: '情况',
          prop: 'condType',
          slot: 'condType'
        },
        {
          label: '有无管理措施',
          prop: 'measureHas',
          slot: 'measureHas',
          width: '110'
        },
        {
          label: '主要措施',
          prop: 'measureDesc'
        },
        {
          label: '危险工序，作业活动',
          prop: 'active',
          width: '140'
        },
        {
          label: '有无指定管理方案',
          prop: 'plan',
          slot: 'plan',
          width: '120'
        },
        {
          label: '项目是否受控',
          prop: 'projectControlled',
          slot: 'projectControlled',
          width: '110'
        },
        {
          label: '项目负责人',
          prop: 'projectHead',
          width: '100'
        },
        {
          label: '监管部门',
          prop: 'monitorDepartment'
        },
        {
          label: '监管负责人',
          prop: 'monitorHead',
          width: '100'
        },
        {
          label: '监管层级',
          prop: 'monitorLevel'
        },
        {
          label: '编制时间',
          prop: 'createTime',
          slot: 'createTime',
          width: '90'
        },

        {
          fixed: 'right',
          label: '操作',
          width: '180',
          prop: 'options',
          slot: 'options'
        }
      ]
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    /** 导出数据 */
    handleDownload() {
      const params = {}
      exportRiskSourceChecklist(params).then(res => {
        const url = window.URL.createObjectURL(new Blob([res]), { type: 'application/vnd.ms-excel' })
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', `重大危险源清单${moment(new Date()).format('YYYYMMDDHHmmss')}.xls`)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },
    dateFormat(data) {
      if (data) {
        return moment(data).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.pageParams,
        sourceName: this.sourceName
      }
      getRiskSourceChecklistList(params).then((res) => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.total = total - 0
        }
      })
    },
    addRiskSourceChecklist() {
      this.optType = 'add'
      this.showModal = true
    },
    editRiskSourceChecklist(data) {
      this.optType = 'edit'
      this.unitDetail = data
      this.showModal = true
    },
    viewDetail(data) {
      this.optType = 'detail'
      this.unitDetail = data
      this.showAddFileModal = true
    },
    delRiskSourceChecklist(data) {
      this.$confirm('确定要删除该重大危险源清单吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const { id } = data
          deleteRiskSourceChecklist({
            riskSourceChecklistId: id
          }).then((res) => {
            const { code, msg } = res
            if (code === '0001') {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getDataList()
            } else {
              this.$message({
                type: 'error',
                message: msg || '删除失败!'
              })
            }
          })
        })
        .catch(() => {})
    },
    search() {
      this.pageParams.pageNum = 1
      this.getDataList()
    },
    reset() {
      this.sourceName = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  height: 50px;
}
.detail {
  height: calc(100% - 50px);
}
</style>
